<template>
  <div>
    <!-- 查询表单 -->
    <div class="check-form-box">
      <el-form
        :inline="true"
        :model="searchModel.data"
        class="demo-form-inline"
      >
        <el-form-item label="姓名">
          <el-input v-model.trim="searchModel.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model.trim="searchModel.mobile"
            :formatter="(value) => value.replace(/[^\d]/g, '')"
            placeholder="请输入手机号码"
          />
        </el-form-item>
        <el-form-item label="协议号">
          <el-input
            v-model.trim="searchModel.protocolNo"
            placeholder="请输入协议号"
          />
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input
            v-model.trim="searchModel.creditCardNo"
            :formatter="(value) => value.replace(/[^\d]/g, '')"
            placeholder="请输入银行卡号"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="searchOrder()" type="primary" color="#ea5b24">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表 -->
    <div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="orderNo" width="160" label="订单号" />
        <el-table-column
          prop="bindType"
          :formatter="judgeBindType"
          label="签约渠道"
        />
        <el-table-column prop="protocolNo" width="240" label="协议号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="mobile" label="手机号码" />
        <el-table-column prop="idCardNo" label="身份证号码" />
        <el-table-column prop="creditCardNo" label="银行卡号" />
        <el-table-column prop="beBind" label="是否已解绑">
          <template #default="scope">
            {{ scope.row.beBind == 0 ? "已解绑" : "未解绑" }}
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="120">
          <template #default>
            <el-button link type="primary" size="small">解绑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { findSignedOrderApi } from "../../../api/index";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  findOrder(flipData);
};
// 搜索模型
const searchModel: any = reactive({
  name: null,
  mobile: null,
  protocolNo: null,
  creditCardNo: null,
  page: page,
  size: size,
});

// 判断签约渠道显示
const judgeBindType = (row) => {
  let str = "";
  pinia.allDic?.user_bind_bank_card_bind_type?.dicList.forEach((item) => {
    if (item.dicValue == row.bindType) {
      str = item.dicName;
      return;
    }
  });
  return str;
};

// // 搜索签约订单
const searchOrder = () => {
  page.value = 1;
  searchParmSearch();
  findOrder(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};

// // 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// // 查询签约订单
const findOrder = (searchModel) => {
  findSignedOrderApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.data;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

onMounted(() => {
  findOrder(searchModel);
});
</script>

<style scoped>
:deep(.el-form-item) {
  margin-right: 2%;
}
</style>
